root{display:block}*{font-size:11px}
h1,h2,h3,h4,h5,h6{margin:0;padding:0}
a img{border:0}
th a{color:#fff;text-decoration:none;font-size:9px}
body{font-family:Geneva,Arial,Helvetica,sans-serif;background:#fff;margin:0;padding:0}
.breadcrumb{background:url(../image/arrows.png) no-repeat 0 5px;padding-left:22px;font-size:18px;color:#333}
#header{width:100%;height:50px;background:url(../image/leafribbon.gif);margin:0;border:1px solid #999}
#bar{width:100%;height:27px;background:#e3e2e2;margin:0;border-bottom:1px solid #ccc;background:url(../image/mainribbon2.gif) #000 repeat-x scroll}
#nav{width:100%;height:27px;background:#e3e2e2;margin:0;border-bottom:1px solid #ccc;}
#logout{background:url(../image/exit.png) no-repeat 0 30%;float:right;width:60px;height:90%;padding:5px 0 0 25px;cursor:pointer}
#logout a{color:#999;font-weight:bold;text-decoration:none}
#logout a:hover{color:red}
#content{width:98%;position:absolute;padding:10px;overflow:auto;}
.watermark{width: 600px; height: 400px; position: fixed;z-index: -999;bottom: 0;right: 0;background: url(../image/parent_and_child_holding_hands_icon.png) no-repeat bottom right}
#footer{position:fixed;bottom:0;right:0;z-index:9999;background:#ccc;border-top:1px solid #999;width:100%;margin:0;height:27px}
.data-input{margin:1em 0 1.2em}
.data-input button,.data-input fieldset,.data-input input,.data-input select{margin:.3em 0}
.data-input textarea{height:60px}
.data-input fieldset{border:1px dotted #bbb;clear:both;padding:.4em;}
.data-input fieldset fieldset legend{font-size:1em}
.data-input input[type=text],.data-input input[type=password],.data-input textarea,.data-input .field-value{float:left;border:1px inset #ccc;min-width:23em;padding:2px;margin-right:5px}
.data-input input[type=submit],.data-input input[type=button]{min-width:80px}
.data-input select{float:left;border:1px inset #ccc;min-width:23.5em;padding:2px;margin-right:5px}
.data-input .filter-predicate{min-width:150px;width:253px}
.data-input .filter-values{min-width:150px}
.data-input .mini{min-width:2em}
.data-input .mini-select{min-width:10em;padding:1px;margin-left:5px;white-space:nowrap}
.data-input .mini-select2{min-width:22.5em;padding:1px;margin-left:10px;white-space:nowrap}
.data-input .page-row{min-width:2em;display:block}.data-input label,.data-input .field-title{clear:both;display:block;float:left;line-height:1.1em;padding:.7em .5em 0;width:10em;white-space:nowrap}
.data-input .blocked{display:block;padding-right:2.4em}
.data-input span{float:left;font-size:9px}
.data-input .field-group{border:0;padding:0}
.data-input .field-group input{min-width:1em}
.data-input .field-group legend{clear:both;display:block;float:left;font-weight:normal;padding:.35em .5em .1em;width:10em;font-size:11px}
.data-input .field-group .tanggal{font-weight:normal;width:8.7em;margin-right:1em}
.data-input .field-group .tgl{font-weight:normal;width:7.5em;margin-right:1em}
.data-input .field-group .datepicker-input{font-weight:normal;width:8.7em;margin-right:1em}
.data-input .field-group .umur{font-weight:normal;width:4.7em}
.data-input .info{color:#666;float:left;font-size:.8em;padding:1em .2em 0}
.data-input .inline-title{clear:none;width:3em}
.data-input .inline-value{float:left}
.data-input .field-option{clear:none;display:inline;float:none;margin-right:1em}
.data-input .input-process{border:0;clear:both;float:left;padding-left:13em;border:0;left:100px}
.data-input .field-value{line-height:1.1em;padding:.7em .5em 0 0}
.data-input .add{background:url(../image/icons/add.png) no-repeat 0 50%;padding-left:17px;cursor:pointer;white-space:nowrap}
.data-input .sort-by{display:block;padding:2px 2px 2px 17px;background:#f4f4f4 url(../image/icons/add.png) no-repeat left}
.monthly-selector input{float:left;min-width:1em}
.monthly-selector .month{min-width:1em;margin:3px}
.monthly-selector input.year{min-width:4em;margin:3px}
.monthly-selector .prev-year-button{background:url(../image/prev-year.png) no-repeat top;border:0;height:20px;float:left}
.monthly-selector .prev-month-button{background:url(../image/prev-month.png) no-repeat top;height:20px;border:0;float:left}
.monthly-selector .next-year-button{background:url(../image/next-year.png) no-repeat top;height:20px;border:0;float:left}
.monthly-selector .next-month-button{background:url(../image/next-month.png) no-repeat top;height:20px;border:0;float:left}
.monthly-selector .none{float:left;white-space:nowrap;padding:3px}
.data-list{margin:.3em 0 .5em;overflow:auto;padding:1px;padding:10px 0}
.data-list caption{font-weight:bold;margin-left:.1em;text-align:left}
.data-list table{border:1px solid #e4e4e4;border-collapse:collapse}
.data-list tbody th{vertical-align:top;width:1em;text-transform:uppercase;font-size:9px}
.data-list td{padding:.2em .5em .15em;vertical-align:top}
.data-list fieldset{border:1px dotted #bbb;clear:both;padding:.4em}
.data-list fieldset fieldset legend{font-size:1em}
.data-list thead th{font:bold "Trebuchet MS",Tahoma,sans-serif;background:#eee;color:#555;padding:.4em;white-space:nowrap;text-transform:uppercase}
.data-list .title{color:#039}
.data-list .active{background:url(../image/icons/accept.png) no-repeat;padding:6px}
.icon  {background-image: url('../image/x16.png'); height: 16px; width: 16px;position: absolute; top: 4px; left: 4px}
.data-list .add, .data-list .varianButton {font:11px tahoma, arial,verdana; border: 1px solid #ccc; padding:5px 8px 5px 24px; margin: 13px 5px 13px 0;text-decoration:none; color: #666; position: relative;cursor: pointer}
.data-list .add:hover {background: #ECF5E9}
.button-add {background-position: -72px 0}
.data-list .next{font-size:10px;border:1px solid #ccc;padding:5px 22px 5px 8px;margin:13px 5px 13px 0;color:#000;text-decoration:none;position:relative;cursor:pointer;background:url('../image/icons/navigation-000-frame.png') no-repeat 95% 50%}
.data-list .prev{font-size:10px;border:1px solid #ccc;padding:5px 8px 5px 22px;margin:13px 5px 13px 0;color:#000;text-decoration:none;position:relative;cursor:pointer;background:url('../image/icons/navigation-180-frame.png') no-repeat 3px 5px}
.data-list .prev:hover{background:url('../image/icons/navigation-180-frame.png') #e3edf2 no-repeat 3px 5px}
.data-list .next:hover{background:url('../image/icons/navigation-000-frame.png') #e3edf2 no-repeat 95% 50%}
.data-list .inadd{background:url('../image/icons/add.png') no-repeat 0;font-size:8px;padding:20px 17px;text-decoration:none}
.data-list .aksi{text-align:center;width:.5em;white-space:nowrap}
.data-list .aksi a{padding:1px 1px 1px 19px;margin-left:.4em;font-size:.9em}
.data-list .aksi .edit{background:url('../image/icons/pencil.png') no-repeat 0 50%;color:blue}
.data-list .aksi .add{background:url('../image/icons/add.png') no-repeat 0 50%}
.data-list .aksi .delete{background:url('../image/icons/delete.png') no-repeat 0 50%;color:blue}
.data-list .aksi .detail{background:url('../image/icons/detail-icon.png') no-repeat 0 50%;color:blue}
.data-list .aksi .reset{background:url('../image/icons/reset.png') no-repeat 0 50%;color:blue}
.data-list .bolder{font-size:12px;text-transform:capitalize}
.data-list .aksi .aktif{background:url(../image/icons/accept.png) no-repeat 0 50%}
.data-list .aksi .nonaktif{background:url(../image/icons/cross.png) no-repeat 0 50%}
.data-list .aksi .privilege{background:url(../image/icons/privilege.png) no-repeat 0 50%}
.even{background:#fff}
.even:hover{background:#d8fabd}
.data-list .group-history{background-color:#ccc;display:block;width:70%;padding:2px 10px 2px 10px;cursor:pointer;color:#fff;margin-bottom:4px}
.data-list .group-history:hover{background-color:#aaa}
.data-list .no-active{background:url(../image/icons/non.ico) no-repeat center;background:12px;padding:6px}
.data-list .no-wrap{white-space:nowrap}
.odd{background:#ecf2f6}
.odd:hover{background:#d8fabd}
.menu{color:#333;text-transform:uppercase;display:block;font-weight:bold;padding:3px 0 6px 25px;font-size:14px;background:url('../image/ui-menu.png') no-repeat 0 30%}
.judul{color:#333;text-transform:uppercase;padding:2px 0 2px 5px;display:block;font-weight:bold;font-size:18px;background:-moz-linear-gradient(right,#ffffff,#c5ecfb); background:-webkit-linear-gradient(right,#ffffff,#c5ecfb);border: 1px solid #63b0f1;border-left: 7px solid #63b0f1;}
.judul a{text-decoration:none;color:#333;font-size:18px}
.judul a:hover{color:#a11f44}
.error{color:#000;background:url(../image/icons/exclamation-red-frame.png) #fa7e84 no-repeat 1%;padding-left:30px;padding-top:5px;height:17px;border:1px solid #ccc;margin:5px 0 5px 0;-moz-border-radius:3px;-webkit-border-radius:3px}
.ok{background:url(../image/icons/exclamation-white.png) #89f98e no-repeat 1%;color:#000;padding-left:30px;padding-top:5px;height:17px;border:1px solid #ccc;margin:5px 0 5px 0;-moz-border-radius:3px;-webkit-border-radius:3px}
.page-next{background:url(../image/next.png) no-repeat;padding:4px 25px 6px 10px;cursor:pointer;font-size:10px}
.page-prev{background:url(../image/prev.png) no-repeat;padding:4px 19px 6px 20px;cursor:pointer;font-size:10px}
.button{width:8em;background-color:#676464;display:inline-block;padding:2px 12px 2px 12px;cursor:pointer;color:#fff;margin-bottom:10px;text-decoration:none;border:1px solid #ccc}
.button:hover{background-color:#716f6f;color:#fff;border:1px solid #ccc}
.del_button{border:1px solid #ccc;color:#666;font-size:10px;padding:2px 5px 2px 20px;background:url(../image/icons/delete.png) no-repeat 0 50%;cursor:pointer}
.del_button:hover{color:#000}
.block{padding:0 5px 0 5px;background-color:#ccc;border:1px solid #0cf;font-weight:normal;text-decoration:none}
.noblock{padding:0 5px 0 5px;background-color:#fff;border:1px solid #0cf;color:#000}
.page-next{background:url(../image/next.png) no-repeat;padding:4px 25px 6px 10px;cursor:pointer;font-size:10px}
.page-prev{background:url(../image/prev.png) no-repeat;padding:4px 19px 6px 20px;cursor:pointer;font-size:10px}
.people{color:#606;text-decoration:none;background:url('../image/icons/user-green.png') no-repeat;padding-left:17px;margin-right:5px}
.people:hover{color:#606;text-decoration:underline}
.money{color:#606;text-decoration:none;background:url('../image/icons/money_icon2.png') no-repeat;padding-left:17px;margin-right:5px}
.money:hover{color:#606;text-decoration:underline}
.right{text-align:right}
.sorting{color:#000;text-decoration:none;background:url(../image/sort.gif) no-repeat 10px;padding-left:20px}
.sorting:hover{color:#000;text-decoration:underline}.x16{width:16px;height:16px;background-image:url('../image/x16.png');position:relative}
#mainpanel{padding:0;margin:0;float:right}
#mainpanel li{padding:0;margin:0;float:left;position:relative;list-style:none}
#mainpanel li a{float:left;text-decoration:none;color:#fff;font-weight:bold;padding:6px 5px 5px 35px}
html #mainpanel li a:hover{background-color:#666}
html #mainpanel li a.active{background-color:#fff;height:17px;margin-top:-2px;border:1px solid #c3c3c3;border-bottom:0;z-index:200;position:relative;color:#000}
#mainpanel .subpanel{position:absolute;left:0;top:26px;display:none;width:245px;border:1px solid #c3c3c3;background:#fff;overflow:hidden;padding:8px 15px;z-index:199;right:0;left:auto;-moz-border-radius:3px 0 3px 3px;-webkit-border-radius:3px 0 3px 3px}
.userpassword{width:130%;border-top:1px dotted #ccc;padding:3px 5px;height:30px;margin:5px -15px -10px -15px;position:relative}
.userpassword a{padding:0;outline:0;margin:0;color:#000!important;background:none!important}
.userpassword:hover{background:#d6eff7}
.user{float:right;background-position:-19px 0;margin:4px;cursor:pointer;position:absolute;top:2px;left:10px}
.saldo{float:right;background:url(../image/money-coin.png) no-repeat;margin:4px;cursor:pointer;position:absolute;top:2px;left:10px}
.exit{float:right;background-position:0 0;margin:4px;cursor:pointer;top:2px}
.exit:hover{background-position:0 -19px}
.time{float:right;background-position:-37px 0;margin:4px;cursor:pointer;position:absolute;top:2px;left:8px}
.time:hover{background-position:-32px -16px}
.password{background-position:-55px 0;margin:4px 2px;cursor:pointer;position:absolute;top:3px;left:8px}
.stdtable{background:#e5e5e5;margin:7px 0}
.stdtable td{padding:2px 5px;background:#fff;font:1em tahoma,arial,verdana}
.stdheader{text-align:center;color:#fff;height:30px}
.stdheader td{margin:-3px;padding:2px 5px;background:#adadad!important;font-weight:bold}
.stdheaderCalendar td{padding:2px 5px;color:#fff;background:#6f9ff1!important;border:1px solid #069}
.search-input{border:1px solid #ccc;font:12px tahoma,arial;padding:4px 3px}
.search-button{background:#919191 url('../image/x16.png') no-repeat -72px -18px;border:1px solid #626060;padding:4px 10px 3px 10px;margin:0 0 0 5px;cursor:pointer}
.floleft{float:left}
.floright{float:right}
#detail{font-size:10px;border:1px solid #ccc;padding:5px 22px 5px 8px;margin:13px 5px 13px 0;color:#000;text-decoration:none;position:relative;cursor:pointer;background:url('../image/icons/navigation-270-frame.png') no-repeat 95% 50%}
#detail:hover{background:url('../image/icons/navigation-270-frame.png') #e3edf2 no-repeat 95% 50%}
#next{font-size:10px;border:1px solid #ccc;padding:5px 22px 5px 8px;margin:13px 5px 13px 0;color:#000;text-decoration:none;position:relative;cursor:pointer;background:url('../image/icons/navigation-000-frame.png') no-repeat 95% 50%}
#next:hover{background:url('../image/icons/navigation-000-frame.png') #e3edf2 no-repeat 95% 50%}
.raport{background:url('../image/icons/raport.png') no-repeat;padding-left:20px;float:left;margin-right:10px}
.raport a{color:blue;text-decoration:none}
.raport a:hover{text-decoration:underline}
div#energysaving,div#energysaving *{-moz-border-radius:0;-webkit-border-radius:0;border:0;background-color:#000}div#energysaving{margin:0;padding:0;position:absolute;left:50%;top:50%;opacity:0;-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=0);text-align:center;z-index:99999}@media screen{body>div#energysaving{position:fixed}}div#energysaving p{margin:0;padding:0;width:100%;font-size:18px;font-family:arial;color:#333;position:relative;top:40%;line-height:20px;font-weight:bold;text-align:center;text-shadow:none}div#energysaving p span{color:#555;font-size:12px;font-weight:normal}div#energysaving div#copyrightOnlineLeaf{padding:0;margin:0;color:#333;font-size:12px;font-weight:normal;position:absolute;bottom:20px;text-align:center;width:100%;height:20px;left:0}
.cetak {background: url(../image/printer.png) no-repeat left;padding-left: 17px;font-weight: bold;cursor: pointer;}
.cetak:hover{color: #3862a9;font-weight: bold;}
.excel { background: url(../image/excel_ico.gif) no-repeat left; padding-left: 17px; font-weight: bold; cursor: pointer; margin-left: 5px; color: black; text-decoration: none;}
.excel:hover{color: #3862a9; font-weight: bold}
#checkAll{width: 90px;font-size:10px;border:1px solid #ccc;padding:5px 8px 5px 22px;color:#000;text-decoration:none;position:relative;cursor:pointer;background:url('../image/arrows_icon.png') no-repeat 5% 50%}
#checkAll:hover{background:url('../image/arrows_icon.png') #e3edf2 no-repeat 5% 50%}
.tips {color: #b7cffc; font-style: italic; font-size: .9em}
fieldset{border: 1px solid #EDF2F6;margin: 5px 0;padding: 10px 5px;}
/****************************tabs css****************************************/
.container{float: left;width: 100%;border: 1px solid #000000;margin-top: 20px;}
.navcontainer ul{background-color: #5F707A;border-bottom:1px solid #DFDFDF;border-top:1px solid #DFDFDF;float:left;font-family:arial,helvetica,sans-serif;font-size:12px;margin:0pt;padding:0pt;width:100%;}
.navcontainer ul li{display: inline;text-align: center;}
.navcontainer ul li a:hover{background-color:#CCCCCC;color:#FFFFFF;}
.navcontainer ul li a{border-right:1px solid #DFDFDF;background-color: #BBBBBB;font-weight: bold;color:#FFFFFF;float:left;padding:10px;text-decoration:none;width: 50px;}
.navcontainer ul li .active{background: #68cbf9}
#tabcontent{min-height: 300px;padding: 40px 10px 10px 10px;}
#preloader{position: absolute;top: 200px;left: 600px;z-index: 100;padding: 5px;text-align: center;background-color: #FFFFFF;border: 1px solid #000000;}
#toggler1{background: url('img/arrows-ffffff2.png') no-repeat -10px -98px;padding-left: 13px;cursor: pointer;font-weight: bold }
#toggler1:hover{color: #6f9ff1;}